/*
* Created by Edward on 23/09/18
* Copyright (c) 2023 ishutime.com All rights reserved
*/
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
@font-face {
font-family: 'iconfont';
src: url('iconfont.woff2?t=1663740079843') format('woff2'),
url('iconfont.woff?t=1663740079843') format('woff'),
url('iconfont.ttf?t=1663740079843') format('truetype');
}
@font-face {
font-family: SourceHanSans;
src: url(../fonts/SourceHanSansCN-Regular.TTF);
/*src: url(https://website-ishutime.oss-cn-chengdu.aliyuncs.com/SourceHanSansCN-Regular.TTF)*/
}
@font-face {
font-family: montserrat;
src: url(../fonts/Geometr415MdBTMedium.ttf)
}
html.has-scroll-smooth {
overflow: hidden;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
html.has-scroll-dragging,
html.has-scroll-dragging * {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.has-scroll-smooth body {
overflow: hidden;
}
.c-scrollbar {
position: absolute;
right: 0;
top: 0;
width: 11px;
height: 100vh;
transform-origin: center right;
transition: transform 0.3s, opacity 0.3s;
opacity: 0;
z-index: 100;
}
.c-scrollbar:hover {
transform: scaleX(1.45);
}
.c-scrollbar:hover,
.has-scroll-dragging .c-scrollbar,
.has-scroll-scrolling .c-scrollbar {
opacity: 1;
}
.c-scrollbar_thumb {
position: absolute;
top: 0;
right: 0;
background-color: #e60012;
width: 7px;
margin: 2px;
cursor: -webkit-grab;
cursor: grab;
}
.has-scroll-dragging .c-scrollbar_thumb {
cursor: -webkit-grabbing;
cursor: grabbing;
}
html,
body {
font-family: 'SourceHanSans', "æ€æºé»‘体", "Microsoft YaHei", '微软雅黑', "Arial";
font-size: 14px;
color: #272727;
}
input,
textarea {
font-family: 'SourceHanSans', "æ€æºé»‘体", "Microsoft YaHei", '微软雅黑', "Arial";
}
.iconfont {
font-family: "iconfont" !important;
font-style: normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
@font-face {
font-family: Brown;
src: url(../fonts/brown/brown-regular.woff2)
}
.header {
width: 100%;
height: auto;
position: fixed;
left: 0%;
top: 0%;
z-index: 100;
padding: 15px 3%;
display: flex;
justify-content: space-between;
align-items: center;
-webkit-transition: all .5s cubic-bezier(0.215, 0.610, 0.355, 1);
/* -webkit-transform: translateY(0%); */
}
.header.active{
/* -webkit-transform: translateY(-100%); */
padding: 5px 3%;
background: #fff;
box-shadow: 0px 0px 30px rgba(0, 0, 0, .1);
}
.header.active a, .header.active span{
color: #3e3e3e;
}
.header.active .langue a.active{
color: #fff;
}
.header.active .logo{
width: 70px;
}
.header a,
.header span {
color: #ffffff;
}
.slides {
height: 100vh;
overflow: hidden;
}
.slides .slide {
height: 100vh;
overflow: hidden;
position: relative;
}
.slides .slide .bg {
position: absolute;
width: 100%;
height: 100%;
right: 0;
top: 0;
background: center center no-repeat;
background-size: cover;
}
.slide1 {
padding-left: 0 !important;
}
.slide1 .swiper-slide {
width: 100vw;
height: 100vh;
overflow: hidden;
background: #000;
}
.slide1 .swiper-slide .parallax {
overflow: hidden;
width: 100%;
height: 100%;
}
.slides .slide.footer {
height: auto;
}
.slide1 .back_img {
width: 100%;
height: 100%;
position: absolute;
left: 0%;
top: 0%;
background: center center no-repeat;
background-size: cover;
}
.banner-swiper .swiper-pagination {
width: auto;
right: 5%;
text-align: right;
bottom: 3%;
}
.banner-swiper .swiper-pagination-bullet {
background: rgba(255, 255, 255, .5);
width: 75px;
height: 5px;
border-radius: 0px;
-webkit-transition: all .5s;
}
.banner-swiper .swiper-pagination-bullet.swiper-pagination-bullet-active {
background: rgba(255, 255, 255, 1);
height: 10px;
}
.total_num {
width: 100px;
height: auto;
display: flex;
align-items: center;
position: absolute;
left: 0%;
top: 50%;
z-index: 2;
color: rgba(255, 255, 255, .5);
-webkit-transform: rotate(90deg);
}
.total_num p:first-child {
color: rgba(255, 255, 255, 1);
}
.total_num p {
font-family: montserrat;
font-size: 30px;
font-weight: bold;
}
.total_num b {
font-weight: normal;
margin-right: 5px;
margin-left: 5px;
}
.logo {
width: 100px;
position: relative;
-webkit-transition: all .5s;
}
.langue {
width: 122px;
height: auto;
display: flex;
justify-content: space-between;
align-items: center;
filter: url("#goo");
position: relative;
}
.langue span {
position: relative;
}
.langue p {
width: 45px;
height: 45px;
position: absolute;
left: 0%;
top: 0%;
background: #e60012;
border-radius: 50%;
-webkit-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
}
.langue p.active {
-webkit-transform: translateX(77px);
}
.header.active .langue a:hover{
color: #fff;
}
.langue a {
width: 45px;
height: 45px;
position: relative;
background: transparent;
border-radius: 50%;
text-align: center;
line-height: 45px;
display: block;
z-index: 2;
}
.detail_box .dpl .singePage video,table,td,tr,tbody{
width: 100%;
position: relative;
display: block;
height: auto;
top: 0%;
-webkit-transform: translateY(0%);
background: #000;
}
.langue a.active {
background: #e60012;
}
/* .langue a::before{
width: 100%;
height: 100%;
position: absolute;
left: 0%;
top: 0%;
content: '';
background: #e60012;
border-radius: 50%;
z-index: -1;
-webkit-transition: all 0.5s cubic-bezier(0.215, 0.610, 0.355, 1);
-webkit-transform: scale(0);
opacity: 0;
}
.langue a.active::before,.langue a:hover::before{
-webkit-transform: scale(1);
opacity: 1;
}
*/
.nav {
width: calc(100% - 400px);
position: relative;
}
.nav ul {
width: 100%;
display: flex;
justify-content: space-between;
}
.nav ul li {
width: calc(100% / 8);
position: relative;
text-align: center;
line-height: 45px;
}
.nav ul li .firstLab,
.nav ul li .firstLab a {
position: relative;
width: 100%;
display: block;
}
.nav ul li .firstLab a{
-webkit-transition: all .5s;
}
.nav ul li:hover .firstLab a{
letter-spacing: 1px;
}
.nav ul li .firstLab {
font-size: 18px;
}
.nav ul li:hover .firstLab a {}
.nav ul li .secondLab {
width: 100%;
height: auto;
position: absolute;
left: 0%;
top: 65px;
background: #fff;
padding: 15px 5px;
border-radius: 5px;
font-size: 16px;
opacity: 0;
visibility: hidden;
box-shadow: 0px 0px 30px rgba(0, 0, 0, .1);
}
.nav ul li:nth-child(3) .secondLab{
width: 120%;
left: -10%;
}
.nav ul li .secondLab::before {
width: 120px;
height: 15px;
position: absolute;
left: 50%;
margin-left: -60px;
top: 0px;
content: '';
background: url(../images/move_up.png) no-repeat;
-webkit-transition: all .65s cubic-bezier(0.19, 1, 0.22, 1);
background-size: cover;
}
.nav ul li .secondLab a {
display: block;
width: 100%;
height: auto;
line-height: 40px;
color: #3e3e3e;
}
.nav ul li:hover .secondLab {
opacity: 1;
visibility: visible;
top: 59px;
-webkit-transition:all .5s cubic-bezier(0.215, 0.610, 0.355, 1)
}
.nav ul li:hover .secondLab::before {
top: -14px;
}
.nav ul li .secondLab a:hover {
color: #e60012;
}
.slide_txt {
width: 38%;
height: auto;
position: absolute;
left: 56%;
top: 50%;
-webkit-transform: translateY(-50%);
color: #fff;
}
.slide_txt .p1 {
width: 100%;
display: flex;
position: relative;
font-size: 4vw;
margin-bottom: 1vw;
justify-content: flex-end;
font-family: montserrat;
}
.slide_txt .p1 .p {
margin-right: 1vw;
}
.slide_txt .p1 .p:last-child {
margin-right: 0%;
}
.slide_txt .p2 {
position: relative;
width: 100%;
line-height: 1.7;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
}
.slide_txt .p2 .b {
font-size: 2vw;
text-transform: uppercase;
font-family: montserrat;
position: relative;
z-index: 2;
line-height: 1;
margin-bottom: 1vw;
font-weight: bold;
}
.slide_txt .p2 .b::before {
width: 100%;
height: 7px;
position: absolute;
left: 0%;
bottom: 4px;
content: '';
background: #e60012;
z-index: -1;
}
.svg {
display: none;
}
.service_swiper {
position: relative;
width: 100%;
height: 100vh;
}
.service_swiper .swiper-slide {
overflow: hidden;
}
.service_swiper .swiper-slide .pic {
width: 100%;
height: 100%;
position: absolute;
left: 0%;
top: 0%;
}
.service_swiper .info {
width: 45%;
height: auto;
position: absolute;
left: 10%;
top: 25%;
color: #ffffff;
}
.service_swiper .info .name {
font-size: 36px;
position: relative;
padding-bottom: 15px;
margin-bottom: 25px;
}
.service_swiper .info .name::after {
width: 35px;
height: 3px;
position: absolute;
left: 0%;
bottom: 0%;
content: '';
background: #ffffff;
}
.service_swiper .info .des {
width: 100%;
font-size: 16px;
line-height: 1.7;
margin-bottom: 65px;
}
.dm_more {
width: 150px;
height: 46px;
border: 1px solid #fff;
display: block;
position: relative;
line-height: 44px;
text-align: center;
color: #ffffff;
overflow: hidden;
-webkit-transition: all .5s;
}
.dm_more.red {
border: 1px solid #e60012;
color: #e60012;
}
.dm_more.red:hover {
color: #ffffff;
}
.dm_more p {
position: relative;
z-index: 2;
}
.dm_more span::before,
.dm_more::before,
.dm_more::after {
background: #e60012;
border-radius: 50%;
-webkit-transform: scale(0);
-webkit-transition: all 1s cubic-bezier(0.215, 0.610, 0.355, 1);
}
.dm_more::before {
width: 50px;
height: 50px;
position: absolute;
right: -65px;
bottom: 0%;
content: '';
}
.dm_more:hover::before {
right: -25px;
-webkit-transform: scale(3);
}
.dm_more::after {
width: 30px;
height: 30px;
position: absolute;
left: -35px;
top: 0%;
content: '';
}
.dm_more:hover::after {
left: -15px;
-webkit-transform: scale(4);
}
.dm_more span::before {
width: 60px;
height: 60px;
position: absolute;
left: 50%;
bottom: 100%;
margin-left: -30px;
content: '';
}
.dm_more:hover span::before {
top: 50%;
-webkit-transform: scale(3);
}
.dm_more:hover {
border-color: #e60012;
}
.dm_more p {
-webkit-transition: all 1s cubic-bezier(0.215, 0.610, 0.355, 1);
}
.dm_more:hover p {
letter-spacing: 4px;
}
.dm_more span {
width: 100%;
height: 100%;
position: absolute;
left: 0%;
top: 0%;
display: block;
}
.service_nav {
width: 80%;
height: auto;
position: absolute;
left: 10%;
bottom: 10%;
display: flex;
z-index: 2;
}
.service_nav a {
display: block;
width: calc(100% / 6 - 1px);
position: relative;
height: auto;
margin-right: 1px;
padding: 25px 15px;
padding-top: 80px;
-webkit-transition: all .5s;
background: rgba(255,255,255,.8);
backdrop-filter: blur(10px);
-webkit-transform: translateY(50px);
opacity: 0;
-webkit-transition: all 0.8s ease .5s;
}
.service_nav a:nth-child(2){
-webkit-transition-delay: .6s;
}
.service_nav a:nth-child(3){
-webkit-transition-delay: .7s;
}
.service_nav a:nth-child(4){
-webkit-transition-delay: .8s;
}
.service_nav a:nth-child(5){
-webkit-transition-delay: .9s;
}
.service_nav a:nth-child(6){
-webkit-transition-delay: 1s;
}
.swiper-slide-active .service_nav a{
-webkit-transform: translateY(0px);
opacity: 1;
}
.service_nav a .s_bg {
width: 100%;
height: 0%;
position: absolute;
left: 0%;
bottom: 0%;
background: #ffffff;
-webkit-transition: all 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
overflow: hidden;
}
.service_nav a .s_bg::before {
width: 286px;
height: 200px;
position: absolute;
right: -120px;
bottom: -75px;
background: url(../images/dl.png) no-repeat;
background-size: cover;
content: '';
}
.service_nav a:hover,
.service_nav a.active {
z-index: 5;
box-shadow: 0px 0px 50px rgba(0, 0, 0, 1);
}
.service_nav a:hover .s_bg,
.service_nav a.active .s_bg {
background: #e60012;
height: 140%;
border-radius: 20px 20px 0px 0px;
}
.service_nav a .icon {
width: 45px;
height: 45px;
position: absolute;
left: 25px;
top: 25px;
margin-left: 0px;
margin-top: 0px;
background: url(../images/s_icons.png) no-repeat;
-webkit-transition: all .5s;
}
.service_nav a .icon2 {
width: 45px;
height: 45px;
background: url(../images/s_icons.png) no-repeat;
-webkit-transition: all .5s;
position: absolute;
left: 50%;
margin-left: -22.5px;
top: -7.5%;
background-position: 0px -45px;
opacity: 0;
-webkit-transform: scale(0);
}
.service_nav a .icon2::before {
width: 85px;
height: 85px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -42.5px;
margin-top: -42.5px;
background: url(../images/lines.png) no-repeat;
background-size: cover;
content: '';
-webkit-animation: lineAnimate 4s linear infinite;
}
@-webkit-keyframes lineAnimate {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
.service_nav a:hover .icon2,
.service_nav a.active .icon2 {
opacity: 1;
-webkit-transform: scale(1);
}
.service_nav a:nth-child(2) .icon2 {
background-position: -45px -45px;
}
.service_nav a:nth-child(3) .icon2 {
background-position: -90px -45px;
}
.service_nav a:nth-child(4) .icon2 {
background-position: -135px -45px;
}
.service_nav a:nth-child(5) .icon2 {
background-position: -180px -45px;
}
.service_nav a:nth-child(6) .icon2 {
background-position: -225px -45px;
}
.service_nav a:hover .icon,
.service_nav a.active .icon {
opacity: 0;
margin-top: -20px;
}
.service_nav a:nth-child(2) .icon {
background-position: -45px 0px;
}
.service_nav a:nth-child(3) .icon {
background-position: -90px 0px;
}
.service_nav a:nth-child(4) .icon {
background-position: -135px 0px;
}
.service_nav a:nth-child(5) .icon {
background-position: -180px 0px;
}
.service_nav a:nth-child(6) .icon {
background-position: -225px 0px;
}
.service_nav a .name {
width: 100%;
height: auto;
position: relative;
bottom: 0px;
-webkit-transition: all .5s;
}
.service_nav a:hover .name,
.service_nav a.active .name {
bottom: 20px;
}
.service_nav a .title {
width: 100%;
height: auto;
position: absolute;
text-align: center;
left: 0%;
bottom: 25px;
opacity: 0;
color: #fff;
-webkit-transition: all .5s;
}
.service_nav a .title b{
font-size: 18px;
}
.service_nav a:hover .title,
.service_nav a.active .title {
opacity: 1;
bottom: 35px;
}
.service_nav a .name b {
display: block;
font-weight: normal;
position: relative;
font-size: 18px;
margin-bottom: 3px;
}
.service_nav a .name p {
text-transform: uppercase;
font-size: 12px;
opacity: .7;
}
.common_top {
width: 100%;
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 3vw;
-webkit-transition: all .7s ease .4s;
opacity: 0;
-webkit-transform: translateY(30px);
}
.swiper-slide-active .common_top{
opacity: 1;
-webkit-transform: translateY(0px);
}
.slide3 {
display: flex;
align-items: center;
}
.commom_title {
width: 100%;
height: auto;
position: relative;
}
.commom_title b {
font-size: 36px;
position: relative;
padding-bottom: 15px;
margin-bottom: 25px;
display: block;
}
.commom_title b::after {
width: 35px;
height: 3px;
position: absolute;
left: 0%;
bottom: 0%;
content: '';
background: #272727;
}
.commom_title.w b::after {
background: rgba(255, 255, 255, .3);
}
.commom_title p {
width: 100%;
font-size: 16px;
line-height: 1.7;
}
.newsSwiper {
overflow: initial;
padding-bottom: 35px;
}
.newsSwiper a {
position: relative;
width: 100%;
padding: 15px;
box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
-webkit-transition: all .5s ease;
display: block;
}
.newsSwiper .swiper-slide{
position: relative;
opacity: 0;
top: 50px;
-webkit-transition: all .8s ease .5s;
}
.newsSwiper .swiper-slide:nth-child(2){
-webkit-transition-delay: 0.6s;
}
.m_intro_map{
display: none;
}
.newsSwiper .swiper-slide:nth-child(3){
-webkit-transition-delay: 0.7s;
}
.newsSwiper .swiper-slide:nth-child(4){
-webkit-transition-delay: 0.8s;
}
.newsSwiper .swiper-slide:nth-child(5){
-webkit-transition-delay: 0.9s;
}
.swiper-slide-active .newsSwiper .swiper-slide{
opacity: 1;
top: 0px;
}
.newsSwiper a .time {
width: 100%;
position: relative;
line-height: 1;
margin-bottom: 10px;
}
.newsSwiper a .time b {
font-family: montserrat;
font-size: 40px;
display: block;
opacity: .4;
}
.newsSwiper a .time p {
opacity: .4;
font-size: 12px;
}
.newsSwiper a .name {
width: 100%;
height: auto;
position: relative;
margin-top: 15px;
margin-bottom: 5px;
min-height: 48px;
font-size: 16px;
}
.newsSwiper a .des {
font-size: 12px;
opacity: .4;
min-height: 41px;
}
.newsSwiper a .icon {
opacity: .5;
font-size: 20px;
}
.swiper-horizontal>.swiper-pagination-progressbar,
.swiper-pagination-progressbar.swiper-pagination-horizontal {
top: auto;
bottom: 0px;
}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
background: #e60012;
}
.slide4 {
display: flex;
align-items: center;
}
.slide4 .w1400 {
display: flex;
justify-content: space-between;
align-items: center;
}
.slide4 .intro_right {
width: calc(100% - 350px);
-webkit-transition: all .7s ease .5s;
opacity: 0;
-webkit-transform: translateY(50px);
}
.slide4.swiper-slide-active .intro_right {
opacity: 1;
-webkit-transform: translateY(0px);
}
.history_list .dot{
width: 12px;
height: 12px;
border: 2px solid #e60012;
border-radius: 50%;
position: absolute;
left: 50%;
margin-left: -6px;
top: -15px;
}
.history_list .dot.down{
top: auto;
bottom: -15px;
}
.slide4 .intro_left {
width: 350px;
-webkit-transition: all 1s ease .35s;
opacity: 0;
-webkit-transform: translateY(50px);
}
.slide4.swiper-slide-active .intro_left{
opacity: 1;
-webkit-transform: translateY(0px);
}
.commom_title.w {
color: #ffffff;
}
.nums {
width: 100%;
margin: 1vw 0px 3vw;
color: #fff;
}
.nums ul li {
width: 100%;
display: flex;
align-items: center;
position: relative;
margin-bottom: 1vw;
}
.nums ul li:last-child {
margin-bottom: 0vw;
}
.nums ul li .l {
width: 100px;
font-size: 70px;
font-family: montserrat;
color: #e60012;
font-weight: bold;
}
.nums ul li .r {
margin-left: 0px;
}
.nums ul li .t {
font-size: 20px;
}
.brands {
width: 400px;
height: auto;
position: absolute;
left: 65%;
top: 50%;
-webkit-transition: all 1.6s ease 0.5s;
opacity: 0;
-webkit-transform: translateY(-45%);
}
.swiper-slide-active .brands{
opacity: 1;
-webkit-transform: translateY(-50%);
}
.brands .list {
position: relative;
width: 90%;
margin-top: 2vw;
}
.brands .list a {
display: block;
width: 100%;
height: 10vh;
position: relative;
background: #fff;
box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
margin-bottom: 1vw;
}
.brands .list a .pic {
height: 80%;
background-size: contain;
top: 10%;
position: absolute;
width: 100%;
}
.partner {
width: 100%;
height: auto;
position: relative;
background: #fff url(../images/bg6.jpg) center center no-repeat;
background-size: contain;
padding: 5vw 0px 3vw;
}
.coopers{
position: relative;
-webkit-transition: all .7s ease .5s;
opacity: 0;
-webkit-transform: translateY(50px);
}
.swiper-slide-active .coopers{
opacity: 1;
-webkit-transform: translateY(0px);
}
.partner ul {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.partner ul li {
width: 16%;
height: auto;
position: relative;
margin-right: 0.8%;
background: #fff;
box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
margin-bottom: 0.5vw;
}
.partner ul li:nth-child(6n) {
margin-right: 0%;
}
.footers {
width: 100%;
height: auto;
position: relative;
background: url(../images/footer_bg.jpg) center center no-repeat;
background-size: cover;
padding: 50px 0px 20px;
color: #fff;
}
.footer_top {
width: 100%;
display: flex;
justify-content: space-between;
margin-bottom: 2vw;
}
.f_ewm {
width: 135px;
height: auto;
position: relative;
text-align: center;
}
.f_ewm p {
margin-top: 5px;
opacity: 0.5;
font-size: 12px;
}
.f_tel {
width: 200px;
position: relative;
}
.f_nav {
width: calc(100% - 400px);
height: auto;
position: relative;
}
.f_nav ul {
width: 100%;
position: relative;
display: flex;
justify-content: space-between;
}
.f_nav ul li {
width: 12.5%;
position: relative;
}
.f_nav ul li:nth-child(2) {
width: 22%;
}
.f_nav ul li:nth-child(5) {
width: 15.5%;
}
.f_nav ul li a {
position: relative;
line-height: 35px;
display: block;
width: 100%;
text-align: center;
color: rgba(255, 255, 255, .5);
-webkit-transition: all .35s;
}
.f_nav ul li a:hover{
color: #fff;
}
.f_nav ul li a:nth-child(1) {
color: #fff;
}
.common_top.mb1 {
margin-bottom: 1vw;
}
.f_tel_ele {
width: 100%;
margin-bottom: 1vw;
}
.f_tel_ele a {
font-family: montserrat;
color: #fff;
width: 100%;
display: block;
font-size: 24px;
text-transform: uppercase;
}
.f_tel_ele .name {
margin-bottom: 5px;
}
.copyright {
width: 100%;
position: relative;
font-size: 12px;
color: rgba(255, 255, 255, .5);
}
.sub_banner {
width: 100%;
height: 100vh;
position: relative;
background: #000;
margin-top: 0px;
overflow: hidden;
}
.sub_img{
width: 100%;
height: 100%;
position: absolute;
left: 0%;
top: 0%;
background: center center no-repeat;
background-size: cover;
opacity: 0.5;
-webkit-animation: subAnimate 2s ease 1 forwards;
}
@-webkit-keyframes subAnimate{
0%{
-webkit-transform: translateY(25px) scale(1.1);
}
100%{
-webkit-transform: translateY(0px) scale(1.1);
}
}
.slogan{
width: 80%;
height: auto;
position: absolute;
left: 10%;
bottom: 15%;
color: #fff;
}
.slogan .cn{
font-size: 2vw;
position: relative;
font-weight: bold;
}
.slogan .en{
width: 100%;
font-size: 6vw;
font-family: montserrat;
text-transform: uppercase;
font-weight: bold;
}
.about_box{
width: 100%;
display: flex;
justify-content: space-between;
}
.about_box .left{
width: 40%;
position: relative;
line-height: 1.3;
font-size: 6vw;
font-weight: bold;
}
.about_box .left .n{
font-family: montserrat;
color: #e60012;
text-transform: uppercase;
}
.about_box .right{
width: 50%;
}
.sub_name{
width: 100%;
position: relative;
}
.sub_name.w{
color: #ffffff;
}
.sub_name.w p::after{
background: #ffffff;
}
.sub_name.c{
text-align: center;
}
.sub_name.c p::after{
left: 50%;
margin-left: -20px;
}
.sub_name p{
position: relative;
font-size: 36px;
padding-bottom: 1vw;
margin-bottom: 2vw;
font-weight: bold;
}
.sub_name p::after{
width: 40px;
height: 4px;
position: absolute;
left: 6px;
bottom: 0px;
content: '';
background: #3e3e3e;
}
.about_img{
width: 100%;
margin-top: 5vw;
position: relative;
z-index: 2;
}
.history{
width: 100%;
margin-top: 5vw;
position: relative;
}
.history .mp{
width: 30%;
height: auto;
position: absolute;
left: 0px;
top: 50%;
-webkit-transform: translateY(-50%);
}
.history_list{
width: 100%;
position: relative;
margin-top: 5vw;
padding-top: 3vw;
}
.history_list .line{
width: 1px;
height: 100%;
position: absolute;
left: 50%;
top: 0%;
background: rgba(0, 0, 0, 0.1);
}
.history_list .line span{
width: 100%;
display: block;
position: absolute;
left: 0%;
top: 0%;
background: #e60012;
height: 0%;
}
.history_list ul{
width: 100%;
display: flex;
flex-wrap: wrap;
position: relative;
}
.history_list ul li{
width: 100%;
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 4vw;
position: relative;
}
.history_list ul li::after{
width: 7px;
height: 7px;
position: absolute;
left: 50%;
margin-left: -3px;
top: 10px;
background: #e60012;
border-radius: 50%;
content: '';
}
.history_list ul li .year{
width: 45%;
position: relative;
text-align: right;
font-family: montserrat;
font-size: 6vw;
font-weight: bold;
color: #e60012;
line-height: 1;
top: -1.7vw;
}
.history_list ul li .info{
width: 45%;
position: relative;
}
.history_list ul li .info .name{
font-size: 18px;
position: relative;
line-height: 25px;
margin-bottom: 1vw;
}
.history_list ul li .info .img{
width: 45%;
position: relative;
margin-bottom: 1vw;
}
.history_list ul li .info .des{
opacity: .6;
line-height: 1.4;
}
.honorSwiper .pic {
background-size: contain;
}
.honorSwiper {
overflow: initial;
}
.hornor_box {
overflow: hidden;
background: url(../images/honor_bg.jpg) top center no-repeat;
background-size: cover;
position: relative;
padding-bottom: 0px;
}
.hornor_box.f4{
background-image: url(../images/cp_bg.jpg);
}
.hornor_box::after{
width: 100%;
height: 40%;
position: absolute;
left: 0%;
bottom: 0%;
content: '';
background: linear-gradient(-180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
}
.honorSwiper {
padding-bottom: 200px;
}
.service_swiper .swiper-slide .pic::after{
width: 100%;
height: 70%;
position: absolute;
left: 0%;
bottom: 0%;
content: '';
background: linear-gradient(-180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .95));
}
.honor_line {
width: 4000px;
height: 64px;
position: absolute;
left: 0%;
bottom: 0;
display: flex;
pointer-events: none;
z-index: 3;
}
.honor_line img {
width: 50%;
}
.honor_line.hl1 {
-webkit-animation: moves 5s linear infinite;
}
.honor_line.hl2 {
-webkit-animation: moves 5s linear infinite 2s;
opacity: 0.5;
}
@-webkit-keyframes moves {
0% {
left: 0px;
}
100% {
left: -2000px;
}
}
.honorSwiper .swiper-slide {
width: 385px;
margin-top: 0px;
-webkit-transition: all .65s;
}
.honorSwiper .swiper-slide:nth-child(odd) {
top: 38px;
}
.honorSwiper .name {
width: 100%;
height: auto;
position: relative;
margin-top: 20px;
font-size: 16px;
text-align: center;
line-height: 20px;
}
.honor_page {
width: 100%;
height: 60px;
display: flex;
align-items: flex-start;
position: absolute;
left: 0px;
bottom: 70px;
}
.honor_page .swiper-button-next,
.honor_page .swiper-button-prev {
position: relative;
width: 50px;
height: 50px;
border-radius: 50%;
-webkit-transition: all .65s;
border: 1px solid #e60012;
color: #e60012;
}
.honor_page .swiper-button-next:after,
.honor_page .swiper-button-prev:after {
font-size: 18px;
}
.honor_page .swiper-button-next {
right: 0px;
margin-left: 25px;
}
.honor_page .swiper-button-prev {
left: 0px;
}
.industry_box{
width: 100%;
position: relative;
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.in_left{
width: 300px;
height: auto;
background: #fff;
box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
border-radius: 10px;
padding: 20px 0px;
}
.in_left a{
display: block;
width: 100%;
height: auto;
position: relative;
padding:12px 30px;
padding-left: 50px;
-webkit-transition: all .5s;
cursor: pointer;
}
.in_left a:hover,.in_left a.active{
color: #e60012;
padding-left: 60px;
}
.in_left a.active::before{
width: 100%;
left: 0%;
opacity: 1;
}
.in_left a::after{
width: 30px;
height: 23px;
position: absolute;
left: 0px;
top: 24px;
content: '';
background: url(../images/dl_icon.png) no-repeat;
background-size: cover;
-webkit-transition: all .5s;
opacity: 0;
}
.in_left a:hover::after,.in_left a.active::after{
left: 20px;
opacity: 1;
}
.in_left a b{
display: block;
width: 100%;
position: relative;
font-size: 18px;
margin-bottom: 5px;
}
.in_left a p{
font-size: 14px;
opacity: .7;
}
.in_right{
width: calc(100% - 350px);
position: relative;
margin-bottom: 10vw;
}
.in_right_row{
width: 100%;
position: relative;
height: auto;
margin-bottom: 5vw;
}
.in_right_row.active{
display: block;
}
.singePage.c{
text-align: center;
}
.cooperate{
width: 100%;
margin-top: 3vw;
position: relative;
}
.cooperate ul li{
width: 100%;
position: relative;
margin-bottom: 7vw;
}
.cooperate ul li .name{
position: relative;
width: 100%;
text-align: center;
margin-bottom: 95px;
}
.cooperate ul li:first-child .name{
margin-bottom: 80px;
}
.cooperate ul li .name b{
font-size: 28px;
}
.cooperate ul li .name b span{
color: #e60012;
}
.cooperate ul li .name p{
font-size: 16px;
}
.cooperate ul li .name::before{
width: 834px;
height: 110px;
position: absolute;
left: 50%;
margin-left: -417px;
top: 20px;
content: '';
background: url(../images/line2.png) top center no-repeat;
}
.coop_row{
width: 100%;
display: flex;
justify-content: space-between;
}
.coop_row .row{
width: 46%;
position: relative;
background-color: #fff;
border-radius: 10px;
box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.coop_row .row .thum{
box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.1);
border-radius: 10px;
}
.coop_row .row .info{
width: 100%;
position: relative;
text-align: center;
padding: 20px;
}
.coop_row .row .info .title{
position: relative;
font-size: 20px;
font-weight: bold;
margin-bottom: 10px;
}
.coop_row .row .info .des{
line-height: 1.7;
font-size: 16px;
}
.coop_sinpge{
width: 100%;
display: flex;
position: relative;
justify-content: space-between;
background: #fff;
box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.1);
border-radius: 10px;
}
.coop_sinpge .thum{
width: 46%;
position: relative;
-webkit-transform: scaleY(1.1);
border-radius: 10px;
}
.coop_sinpge .thum .pic{
height: 100%;
}
.coop_sinpge .th{
width: 50%;
position: relative;
display: flex;
padding:50px 35px;
}
.coop_sinpge .th .info{
width: 50%;
position: relative;
text-align: center;
}
.coop_sinpge .th .info:first-child::after{
width: 1px;
height: 100%;
position: absolute;
right: 0%;
top: 0%;
content: '';
background: rgba(0, 0, 0, 0.05);
}
.coop_sinpge .th .info .title{
position: relative;
font-size: 20px;
font-weight: bold;
margin-bottom: 10px;
}
.coop_sinpge .th .info .des{
line-height: 1.7;
font-size: 16px;
}
.cooperate ul li:nth-child(3){
direction: rtl;
}
.cooperate ul li:nth-child(3) .coop_sinpge .th{
direction: initial;
}
.cooperate ul li:last-child .name{
margin-bottom: 80px;
}
.hzhb{
width: 100%;
position: relative;
}
.hzhb ul{
width: 100%;
display: flex;
justify-content: center;
margin-bottom: 1vw;
}
.hzhb ul li{
width: 19%;
height: auto;
position: relative;
background: #fff;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
border-radius: 5px;
margin-right: 1.25%;
-webkit-transition-delay: 0.2s;
}
.hzhb ul li:nth-child(2n){
-webkit-transition-delay: 0.4s;
}
.hzhb ul li:nth-child(3n){
-webkit-transition-delay: 0.6s;
}
.hzhb ul li:nth-child(4n){
-webkit-transition-delay: 0.5s;
}
.hzhb ul li:nth-child(5n){
-webkit-transition-delay: 0.35s;
}
.hzhb ul li:nth-child(5n){
margin-right: 0%;
}
.case_nav{
width: 100%;
position: relative;
text-align: center;
display: flex;
justify-content: center;
margin-bottom: 4vw;
}
.case_nav a{
width: 165px;
height: 122px;
display: block;
position: relative;
background: url(../images/case_icon.png) no-repeat;
margin: 0px 1vw;
}
.iconBox{
display: none;
}
.case_nav a p{
position: absolute;
width: 100%;
top: 50%;
-webkit-transform: translateY(-50%);
font-size: 20px;
font-weight: bold;
}
.case_nav a:hover,.case_nav a.active{
color: #fff;
background-position: 0px -122px;
}
.case_list{
position: relative;
width: 100%;
}
.case_list ul{
width: 100%;
display: flex;
flex-wrap: wrap;
}
.case_list ul li{
width: 32%;
position: relative;
margin-right: 2%;
margin-bottom: 2vw;
-webkit-transition-delay: 0.2s;
}
.case_list ul li:nth-child(2n){
-webkit-transition-delay: 0.4s;
}
.case_list ul li:nth-child(3n){
-webkit-transition-delay: 0.6s;
}
.case_list ul li:nth-child(3n){
margin-right: 0%;
}
.case_list ul li a{
display: block;
position: relative;
padding: 25px 20px;
box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.05);
-webkit-transition: all .5s;
}
.case_list ul li a::after{
width: 0%;
height: 3px;
position: absolute;
left: 0%;
bottom: 0%;
content: '';
background: #e60012;
-webkit-transition: all .5s;
}
.case_list ul li a:hover::after{
width: 100%;
}
.case_list ul li a:hover .pic{
-webkit-transform: scale(1.1);
}
.case_list ul li a:hover{
box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.3);
}
.case_list ul li a .name{
width: 100%;
position: relative;
margin-bottom: 1vw;
}
.case_list ul li a .name .time{
color: #e60012;
font-family: montserrat;
font-size: 16px;
font-weight: bold;
}
.case_list ul li a .name .title{
font-size: 22px;
line-height: 1.4;
position: relative;
font-weight: bold;
}
.case_list ul li a .name .iconfont{
width: 45px;
height: 45px;
position: absolute;
right: 0%;
bottom: 0%;
background: rgba(0, 0, 0, 0.05);
line-height: 45px;
text-align: center;
border-radius: 50%;
font-size: 24px;
color: rgba(0, 0, 0, 0.3);
-webkit-transition: all .5s;
z-index: 2;
display: none;
}
.case_list ul li a .name .iconfont::before{
width: 100%;
height: 100%;
position: absolute;
left: 0%;
top: 0%;
background: #e60012;
-webkit-transition: all .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-webkit-transform: scale(0);
z-index: -1;
content: '';
border-radius: 50%;
}
.case_list ul li a:hover .name .iconfont{
color: #fff;
}
.case_list ul li a:hover .name .iconfont::before{
-webkit-transform: scale(1);
}
.contact{
padding: 0px;
overflow: hidden;
}
.map{
width: 100%;
position: absolute;
height: 100%;
left: 0%;
top: 0%;
}
.contact_box{
width: 560px;
position: relative;
margin-left: 50%;
margin-top: 6vw;
margin-bottom: 6vw;
background: #fff;
padding: 50px;
box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.1);
border-radius: 10px;
}
.contact_box .name{
width: 100%;
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 2px solid #e60012;
margin-bottom: 3vw;
padding-bottom: 0.5vw;
}
.contact_box .name b{
color: #e60012;
font-size: 50px;
font-family: montserrat;
text-transform: uppercase;
}
.contact_box .link{
width: 200px;
display: flex;
align-items: center;
justify-content: space-between;
}
.contact_box .link a{
width: 46%;
}
.contact_box .list{
width: 100%;
position: relative;
}
.contact_box .list ul li{
width: 100%;
display: flex;
position: relative;
margin-bottom: 4vw;
}
.contact_box .list ul li:last-child{
margin-bottom: 0px;
}
.contact_box .list ul li .num{
width: 50px;
color: #e60012;
font-family: montserrat;
font-size: 30px;
line-height: 1;
font-weight: bold;
}
.contact_box .list ul li .info{
width: calc(100% - 50px);
}
.contact_box .list ul li .info .title{
font-size: 18px;
font-weight: bold;
margin-bottom: 0.5vw;
}
.contact_box .list ul li .info .des{
line-height: 1.7;
}
.company_box{
width: 100%;
display: flex;
position: relative;
justify-content: space-between;
align-items: center;
}
.company_box .left{
width: 50%;
position: relative;
}
.company_box .right{
width: 45%;
position: relative;
}
.service_swiper .swiper-pagination{
display: none;
}
.sub_words{
width: 150%;
font-size: 6.5vw;
font-weight: bold;
text-transform: uppercase;
font-family: montserrat;
opacity: 0.1;
margin-bottom: 1vw;
}
.com_list{
width: 100%;
position: relative;
}
.com_list ul li{
width: 100%;
position: relative;
background: #fff;
box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.05);
padding: 20px;
display: flex;
align-items: center;
margin-bottom: 2vw;
justify-content: space-between;
border-radius: 10px;
}
.com_list ul li .img{
width: 115px;
height: auto;
position: relative;
}
.com_list ul li .info{
width: calc(100% - 135px);
line-height: 1.7;
font-size: 16px;
}
.r_rect,.r_zfx,.r_center{
width: 100%;
position: absolute;
height: 100%;
left: 0%;
top: 0%;
}
.r_center{
pointer-events: none;
}
.r_zfx{
display: flex;
flex-wrap: wrap;
}
.r_zfx a{
width: 50%;
height: 50%;
position: relative;
display: block;
}
.r_rect img{
width: 100%;
position: absolute;
height: 100%;
left: 0%;
top: 0%;
-webkit-transition: all .5s;
opacity: 0.65;
}
.r_rect img.active{
opacity: 1;
}
.company_box .right>img{
position: relative;
width: 100%;
z-index: 5;
pointer-events: none;
}
.r_zfx a p{
font-size: 16px;
color: #fff;
text-align: center;
top: 45%;
-webkit-transform: translateY(-50%);
position: absolute;
width: 100%;
}
.r_zfx a:nth-child(3) p,.r_zfx a:nth-child(4) p{
top: 55%;
}
.r_center{
z-index: 10;
}
.r_logo{
width: 40%;
height: auto;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translateY(-50%) translateX(-50%);
z-index: 20;
-webkit-perspective: 200px;
}
.r_logo img{
-webkit-animation: logoAnimate 4s linear infinite;
}
@-webkit-keyframes logoAnimate{
0%{
-webkit-transform: rotateY(0deg);
}
50%,100%{
-webkit-transform: rotateY(360deg);
}
}
.r_animate{
width: 100%;
height: 100%;
position: absolute;
left: 0%;
top: 0%;
-webkit-transform: scale(1.05);
-webkit-animation: rectAnimate 10s linear infinite;
}
@-webkit-keyframes rectAnimate{
0%{
-webkit-transform: rotate(0deg) scale(1.05);
}
100%{
-webkit-transform: rotate(-360deg) scale(1.05);
}
}
.news_focus{
width: 100%;
display: flex;
justify-content: space-between;
margin-bottom: 3vw;
}
.news_focus .focus_left{
width: 66%;
}
.news_focus .focus_left a{
padding: 20px;
background: #fff;
position: relative;
box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
display: block;
}
.news_focus .focus_left a:hover .pic,.news_focus .focus_right a:hover .pic,.news_list ul li a:hover .pic{
-webkit-transform: scale(1.1);
}
.news_focus .focus_left a:hover .info .title .name,.news_focus .focus_right a:hover .info .name,.news_list ul li a:hover .name{
color: #e60012;
}
.news_focus .focus_right{
width: calc(33.5% - 20px);
display: flex;
flex-wrap: wrap;
align-content: space-between;
}
.news_focus .focus_right a{
position: relative;
padding: 15px;
background: #fff;
display: block;
box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
-webkit-transition: all .5s;
}
.news_focus .focus_left a,.news_list ul li a{
-webkit-transition: all .5s;
}
.news_focus .focus_right a:hover,.news_focus .focus_left a:hover,.news_list ul li a:hover,.newsSwiper a:hover{
box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.3);
}
.news_focus .focus_right a .info{
width: 100%;
display: flex;
align-items: center;
position: relative;
margin-top: 15px;
justify-content: space-between;
}
.news_focus .focus_right a .info .time{
text-align: center;
width: 75px;
position: relative;
color: rgba(0, 0, 0, 0.4);
line-height: 1;
}
.news_focus .focus_right a .info .time::after{
width: 1px;
height: 100%;
position: absolute;
right: 0%;
top: 0%;
content: '';
background: rgba(0, 0, 0, 0.1);
display: block;
}
.news_focus .focus_right a .info .time b{
display: block;
position: relative;
font-size: 32px;
font-family: montserrat;
line-height: 1;
}
.news_focus .focus_right a .info .time p{
font-size: 12px;
}
.news_focus .focus_right a .info .name{
width: calc(100% - 85px);
position: relative;
line-height: 1.6;
}
.news_focus .focus_left a .info{
width: 100%;
display: flex;
justify-content: space-between;
margin-top: 30px;
margin-bottom: 10px;
}
.news_focus .focus_left a .info .time{
width: 100px;
text-align: center;
color: rgba(0, 0, 0, 0.4);
position: relative;
}
.news_focus .focus_left a .info .time::after{
width: 1px;
height: 100%;
position: absolute;
right: 0%;
top: 0%;
content: '';
background: rgba(0, 0, 0, 0.05);
}
.news_focus .focus_left a .info .title{
width: calc(100% - 120px);
}
.news_focus .focus_left a .info .time b{
display: block;
font-size: 50px;
font-family: montserrat;
line-height: 1;
}
.news_focus .focus_left a .info .time .mark{
font-size: 12px;
display: inline-block;
background: #e60012;
color: #fff;
padding: 1px 10px;
}
.news_focus .focus_left a .info .title .name{
font-size: 20px;
position: relative;
margin-bottom: 5px;
}
.news_focus .focus_left a .info .title .des{
width: 100%;
font-size: 14px;
line-height: 1.7;
color: rgba(0, 0, 0, 0.4);
}
.news_list{
width: 100%;
position: relative;
}
.news_list ul{
display: flex;
width: 100%;
flex-wrap: wrap;
}
.news_list ul li{
width: 32%;
position: relative;
margin-right: 2%;
margin-bottom: 1.5vw;
-webkit-transition-delay: 0.2s;
}
.news_list ul li:nth-child(2n){
-webkit-transition-delay: 0.4s;
}
.news_list ul li:nth-child(3n){
margin-right: 0%;
-webkit-transition-delay: 0.6s;
}
.news_list ul li a::after,.news_focus .focus_left a::after,.news_focus .focus_right a::after,.newsSwiper a::after{
width: 0%;
position: absolute;
left: 0%;
bottom: 0%;
height: 3px;
content: '';
-webkit-transition: all .5s;
background: #e60012;
}
.news_list ul li a:hover::after,.news_focus .focus_left a:hover::after,.news_focus .focus_right a:hover::after,.newsSwiper a:hover::after{
width: 100%;
}
.newsSwiper a:hover .pic{
-webkit-transform: scale(1.1);
}
.newsSwiper a:hover .name{
color: #e60012;
}
.news_list ul li a{
padding:20px 15px;
position: relative;
background: #fff;
box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
display: block;
}
.news_list ul li a .time{
position: relative;
color: rgba(0, 0, 0, 0.4);
line-height: 1;
margin-bottom: 10px;
}
.news_list ul li a .time b{
display: block;
position: relative;
font-size: 32px;
font-family: montserrat;
line-height: 1;
}
.news_list ul li a .time p{
font-size: 12px;
}
.news_list ul li a .thum{
margin-bottom: 15px;
}
.news_list ul li a .name{
font-size: 16px;
margin-bottom: 5px;
min-height: 55px;
}
.news_list ul li a .des{
color: rgba(0, 0, 0, 0.4);
margin-bottom: 5px;
}
.news_list ul li a .icon{
width: 100%;
font-size: 28px;
line-height: 30px;
opacity: .4;
}
.mouse_icon{
width: 150px;
height: auto;
position: absolute;
right: 3%;
bottom: 10%;
color: rgba(255, 255, 255, .5);
text-align: center;
}
.mouse_icon p{
font-size: 12px;
display: block;
margin-bottom: 10px;
}
.mouse_icon .mouse{
width: 30px;
height: auto;
margin: 0px auto;
position: relative;
}
.mouse_icon .mouse img{
-webkit-animation: upAnimate 2s ease infinite;
}
@-webkit-keyframes upAnimate{
0%,100%{
-webkit-transform: translateY(-4px);
}
50%{
-webkit-transform: translateY(4px);
}
}
.mouse_icon .icon{
width: 18px;
margin: 0px auto;
}
.mouse_icon .icon img{
-webkit-animation: upAnimate2 2s ease infinite;
}
@-webkit-keyframes upAnimate2{
0%,100%{
-webkit-transform: translateY(-1px);
}
50%{
-webkit-transform: translateY(3px);
}
}
.hornor_box .sub_name{
margin-bottom: 5vw;
}
.honor_tips{
width: 60%;
height: auto;
position: absolute;
right: 0%;
top: 0%;
color: #fff;
}
.honor_tips p{
margin-bottom: 15px;
position: relative;
line-height: 20px;
padding-left: 15px;
}
.honor_tips p::after{
width: 8px;
height: 8px;
content: '';
background: #fff;
border-radius: 50%;
position: absolute;
left: 0%;
top: 6px;
}
.menu_btn {
position: absolute;
right: 0px;
display: none;
width: 60px;
height: 60px;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
background: #e60012;
color: transparent;
border: none;
}
.menu_btn span {
top: 29px;
left: 20px;
width: 20px;
}
.menu_btn span, .menu_btn span:after, .menu_btn span:before {
position: absolute;
height: 2px;
background-color: #fff;
border-radius: 1px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}
.menu_btn span:after, .menu_btn span:before {
content: "";
left: 0;
-webkit-transform: translateY(0px) rotate(0deg);
}
.menu_btn span:before {
top: -6px;
width: 14px;
}
.menu_btn span:after {
top: 6px;
width: 12px;
}
.menu_btn.active span {
background-color: transparent;
}
.menu_btn.active span:before {
-webkit-transform: translateY(6px) rotate(-45deg);
}
.menu_btn.active span:after {
-webkit-transform: translateY(-6px) rotate(45deg);
}
.menu_btn.active span:after, .menu_btn.active span:before {
width: 20px;
}
video{
object-fit: cover;
width: 100%;
display: block;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
}
@media screen and (max-width: 1650px) {
.nav ul li:nth-child(3) .secondLab{
width: 140%;
left: -20%;
}
}
@media screen and (max-width: 1600px) {
.nav ul li .secondLab::before {
width: 80px;
height: 10px;
margin-left: -40px;
}
.nav ul li:hover .secondLab::before {
top: -9px;
}
.nav ul li:hover .secondLab {
top: 50px;
}
.service_nav{
width: 90%;
left: 5%;
}
.service_nav a .name b {
font-size: 16px;
}
.total_num {
left: -1%;
}
}
@media screen and (max-width: 1440px) {
.nav {
width: calc(100% - 350px);
position: relative;
}
.nav ul li .firstLab{
font-size: 16px;
}
.nav ul li .secondLab{
font-size: 14px;
padding: 10px 5px;
}
.nav ul li .secondLab a{
line-height: 30px;
}
.logo{
width: 90px;
}
.nav ul li .secondLab::before {
width: 60px;
height: 7.5px;
margin-left: -30px;
}
.nav ul li:hover .secondLab::before {
top: -7.5px;
}
.f_nav ul li a{
font-size: 12px;
}
/* .in_left{
width: 275px;
}
.in_right {
width: calc(100% - 325px);
}
.in_left a{
padding-left: 50px;
}
.in_left a b{
font-size: 18px;
}
.in_left a:hover, .in_left a.active {
color: #e60012;
padding-left: 60px;
}
.in_left a::after{
top: 20px;
}
.in_left a:hover::after, .in_left a.active::after {
left: 15px;
opacity: 1;
width: 30px;
height: 23px;
top: 20px;
} */
.service_nav a .title b{
font-size: 16px;
}
}
@media screen and (max-width: 1365px) {
.nav {
width: calc(100% - 300px);
position: relative;
}
}
@media screen and (max-width:1024px){
.menu_btn {
display: block;
}
.nav{
height: calc(100vh - 60px);
position: fixed;
left: 0px;
top: 60px;
display: block;
width: 100%;
background: #fff;
-webkit-transition: all .5s;
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.header{
background: #fff;
padding: 5px 3%;
box-shadow: 0px 0px 30px rgba(0, 0, 0, .1);
}
.logo{
width: 50px;
}
.langue{
margin-right: 60px;
width: 70px;
}
.langue p{
display: none;
}
.langue a{
color: #3e3e3e;
font-size: 14px;
}
.langue a{
width: 30px;
height: 30px;
line-height: 30px;
}
.langue a.active{
color: #e60012;
background: transparent;
}
.langue span{
color: rgba(0, 0, 0, 0.4);
}
.header.active .logo {
width: 50px;
}
.header.active .langue a.active {
color: #e60012;
}
.total_num{
display: none;
}
.banner-swiper .swiper-pagination{
text-align: center;
}
.banner-swiper .swiper-pagination-bullet{
width: 45px;
height: 2px;
}
.banner-swiper .swiper-pagination-bullet.swiper-pagination-bullet-active{
height: 5px;
}
.slides{
height: calc(100vh - 60px);
position: relative;
margin-top: 60px;
}
.slide_txt {
width: 80%;
left: 10%;
top: 40%;
}
.slide_txt .p1{
font-size: 8vw;
margin-bottom: 3vw;
}
.slide_txt .p2 .b{
font-size: 5vw;
margin-bottom: 3vw;
}
.service_nav{
display: none;
}
.service_swiper .info {
width: 90%;
left: 5%;
top: auto;
bottom: 15vh;
-webkit-transition: all .8s ease .5s;
-webkit-transform: translateY(50px);
opacity: 0;
}
.swiper-slide-active .service_swiper .swiper-slide-active .info {
-webkit-transform: translateY(0px);
opacity: 1;
}
.service_swiper .info .name{
font-size: 7vw;
}
.service_swiper .info .des{
font-size: 14px;
margin-bottom: 15vw;
}
.dm_more {
width: 130px;
height: 42px;
line-height: 40px;
}
.slides .slide,.slide1 .swiper-slide,.service_swiper{
height: calc(100vh - 60px);
}
.service_swiper .swiper-pagination{
display: block;
bottom: 5%;
text-align: left;
padding-left: 5%;
}
.swiper-pagination-bullet{
background: #fff;
}
.swiper-pagination-bullet-active{
background: #fff;
}
.service_swiper .swiper-slide .pic::after{
width: 100%;
height: 70%;
position: absolute;
left: 0%;
bottom: 0%;
content: '';
background: linear-gradient(-180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .95));
}
.commom_title b {
font-size: 7vw;
margin-bottom: 3vw;
}
.commom_title p{
font-size: 14px;
}
.w1400{
width: 90%;
}
.common_top{
margin-bottom: 5vw;
}
.newsSwiper a .des{
display: none;
}
.newsSwiper a .name{
min-height: 82px;
-webkit-line-clamp: 3;
}
.slide4 .intro_right,.slide4 .intro_left{
width: 100%;
}
.slide4 .w1400{
flex-wrap: wrap;
}
.nums ul li .l{
font-size: 10vw;
width: 14vw;
}
.nums ul{
width: 100%;
display: flex;
flex-wrap: wrap;
}
.nums ul li{
width: 50%;
}
.nums ul li .t{
font-size: 16px;
}
.nums ul li .b{
font-size: 12px;
}
.intro_right{
display: none;
}
.m_intro_map{
display: block;
width: 100%;
margin-left: 0%;
}
.intro_left .dm_more{
margin-top: 5vw;
}
.nums{
margin-top: 5vw;
}
.f_nav{
display: none;
}
.f_tel_ele a{
font-size: 5vw;
}
.f_ewm{
width: 115px;
}
.copyright{
line-height: 1.7;
}
.f_tel_ele{
margin-bottom: 3vw;
}
.f_tel_ele:last-child{
margin-bottom: 0vw;
}
.common_top.mb1 {
margin-bottom: 5vw;
}
.partner ul li{
width: 32%;
margin-right: 2%;
margin-bottom: 1.5vw;
}
.partner ul li:nth-child(6n){
margin-right: 2%;
}
.partner ul li:nth-child(3n){
margin-right: 0%;
}
.slides .slide.slide5 .bg{
background-position: 65% 50%;
}
.brands{
width: 65%;
left: 30%;
}
.brands .list{
margin-top: 5vw;
display: flex;
flex-wrap: wrap;
}
.brands .list a{
margin-bottom: 2vw;
}
.nav.active {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.nav ul{
flex-wrap: wrap;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
padding: 0px 5%;
}
.nav ul li{
width: 100%;
display: flex;
border-bottom: 1px solid rgba(0,0,0,.1);
padding-bottom: 10px;
margin-bottom: 10px;
-webkit-transform: translateY(50px);
opacity: 0;
}
.nav.active ul li{
-webkit-transition: all .6s;
-webkit-transform: translateY(0px);
opacity: 1;
}
.nav.active ul li:nth-child(2){
-webkit-transition: all .6s ease .05s;
}
.nav.active ul li:nth-child(3){
-webkit-transition: all .6s ease .1s;
}
.nav.active ul li:nth-child(4){
-webkit-transition: all .6s ease .15s;
}
.nav.active ul li:nth-child(5){
-webkit-transition: all .6s ease .2s;
}
.nav.active ul li:nth-child(6){
-webkit-transition: all .6s ease .25s;
}
.nav.active ul li:nth-child(7){
-webkit-transition: all .6s ease .3s;
}
.nav.active ul li:nth-child(8){
-webkit-transition: all .6s ease .35s;
}
.header a{
color: #3e3e3e;
}
.nav ul li .secondLab {
font-size: 14px;
padding: 0px;
width: calc(100% - 100px);
position: relative;
top: 0px;
opacity: 1;
visibility: visible;
box-shadow: none;
display: flex;
flex-wrap: wrap;
}
.nav ul li .secondLab a{
width: auto;
margin-right: 10px;
}
.nav ul li .secondLab a:last-child{
margin-right: 0px;
}
.nav ul li .firstLab {
font-size: 16px;
width: 100px;
text-align: left;
line-height: 30px;
font-weight: bold;
padding-left: 9px;
}
.nav ul li:nth-child(3) .secondLab {
width: calc(100% - 100px);
left: 0%;
}
.nav ul li .firstLab::after{
width: 3px;
height: 20px;
position: absolute;
left: 0%;
top: 5px;
content: '';
background: #3e3e3e;
}
.f_tel{
width: calc(100% - 135px);
}
.newsSwiper{
padding-bottom: 20px;
}
.newsSwiper .swiper-pagination-progressbar{
background: rgba(0,0,0,.02);
}
.nav ul li:hover .secondLab {
top: 0px;
}
.sub_banner{
margin-top: 60px;
height: 50vh;
}
.mouse_icon{
display: none;
}
.slogan{
width: 90%;
left: 5%;
}
.slogan .cn{
font-size: 6vw;
}
.slogan .en{
font-size: 10vw;
}
.boxes{
padding: 15vw 0px;
overflow: hidden;
}
.about_box{
flex-wrap: wrap;
}
.about_box .left{
width: 100%;
font-size: 7vw;
line-height: 1;
margin-bottom: 3vw;
}
.about_box .right{
width: 100%;
}
.about_box .left .n:nth-child(2),.about_box .left .n:nth-child(3){
width: auto;
display: inline-block;
}
.sub_name p{
font-size: 7vw;
padding-bottom: 15px;
margin-bottom: 3vw;
}
.history_list ul li .year{
width: 25%;
top: 0%;
}
.history_list ul li .info{
width: 65%;
}
.history_list .line{
left: 30%;
}
.history_list .dot,.history_list ul li::after{
left: 30%;
}
.history_list ul li .info .name{
font-size: 16px;
}
.honor_tips{
width: 100%;
position: relative;
margin-bottom: 5vw;
}
.honorSwiper .swiper-slide:nth-child(odd) {
top: 0px;
}
.honor_tips p{
margin-bottom: 10px;
}
.honorSwiper .name{
font-size: 14px;
margin-top: 10px;
}
.honorSwiper {
padding-bottom: 50px;
}
.honor_page .swiper-button-next, .honor_page .swiper-button-prev{
width: 40px;
height: 40px;
}
.honor_page{
height: 40px;
bottom: 0px;
}
.honor_line{
width: 2000px;
height: 32px;
}
.in_left{
display: none;
}
.in_right{
width: 100%;
margin-bottom: 0px;
}
.in_right_row{
margin-bottom: 15vw;
}
.case_nav a{
width: 108px;
height: 80px;
position: relative;
background-size: cover;
}
.case_nav a:hover, .case_nav a.active {
color: #fff;
background-position: 0px -80px;
}
.case_nav a p{
font-size: 16px;
}
.case_nav{
margin-bottom: 5vw;
}
.case_list ul li{
width: 48%;
margin-bottom: 3vw;
margin-right: 4%;
}
.case_list ul li:nth-child(3n){
margin-right: 4%;
}
.case_list ul li:nth-child(2n){
margin-right: 0%;
}
.case_list ul li a{
padding: 0px;
}
.case_list ul li a .name{
padding: 15px 15px 10px;
margin-bottom: 0px;
}
.case_list ul li a .name .time{
font-size: 14px;
}
.case_list ul li a .name .title{
font-size: 4vw;
text-overflow: initial;
white-space: inherit;
}
.detail_top .w100{
width: 90%;
}
.detail_top{
padding: 150px 0px 25px;
}
.detail_top .title{
font-size: 6vw;
}
.detail_top .info{
margin-top: 1vw;
font-size: 12px;
}
.detail_box{
padding: 5vw;
width: 100%;
}
.detail_box .dpr{
display: none;
}
.detail_box .dpl{
width: 100%;
}
.ndc_npnews{
flex-wrap: wrap;
}
.ndc_npnews .post_next, .ndc_npnews .post_prev{
font-size: 12px;
width: 100%;
padding: 10px;
margin-bottom: 5px;
}
.ndc_npnews .post_next .icon, .ndc_npnews .post_prev .icon {
width: 44px;
}
.ndc_npnews .post_next .name, .ndc_npnews .post_prev .name {
width: calc(100% - 44px);
}
.news_focus{
flex-wrap: wrap;
}
.news_focus .focus_left{
width: 100%;
margin-bottom: 5vw;
}
.news_focus .focus_left a{
padding: 10px;
}
.news_focus .focus_left a .info .time b{
font-size: 30px;
}
.news_focus .focus_left a .info .time p{
font-size: 12px;
}
.news_focus .focus_left a .info .time .mark{
display: none;
}
.news_focus .focus_left a .info .time{
width: 70px;
}
.news_focus .focus_left a .info .title {
width: calc(100% - 70px);
padding-left: 10px;
}
.news_focus .focus_left a .info .title .name{
font-size: 16px;
}
.news_focus .focus_left a .info{
margin-top: 10px;
margin-bottom: 0px;
}
.news_focus .focus_right{
width: 100%;
}
.news_focus .focus_right a{
padding: 10px;
margin-bottom: 5vw;
}
.news_list ul li{
width: 100%;
margin-right: 0%;
margin-bottom: 5vw;
}
.news_list ul li a .des,.news_list ul li a .icon{
display: none;
}
.news_list ul li a .name{
margin-bottom: 0px;
min-height: auto;
}
.news_focus .focus_right a .info .name{
font-size: 16px;
}
.news_focus .focus_right a .info{
margin-top: 10px;
}
.news_list ul li a .thum{
margin-bottom: 10px;
}
.news_list ul li a{
padding: 10px;
}
#page li{
margin: 0 3px;
width: 25px;
}
.company_box{
flex-wrap: wrap;
}
.company_box .left{
width: 100%;
margin-bottom: 5vw;
}
.com_list ul li{
padding:15px 10px;
margin-bottom: 5vw;
}
.sub_words{
display: none;
}
.com_list ul li .img{
width: 75px;
}
.com_list ul li .info{
width: calc(100% - 85px);
}
.company_box .right{
width: 90%;
margin-left: 5%;
}
.r_zfx a p{
font-size: 14px;
}
.cooperate ul li .name::before{
display: none;
}
.cooperate ul li .name b{
font-size: 6vw;
}
.cooperate ul li .name p{
font-size: 14px;
}
.cooperate ul li:first-child .name{
margin-bottom: 5vw;
}
.cooperate ul li{
margin-bottom: 10vw;
}
.coop_row .row{
width: 100%;
margin-bottom: 5vw;
}
.coop_row .row .info{
padding: 10px;
}
.coop_row .row .info .title{
font-size: 4vw;
margin-bottom: 1vw;
}
.coop_row .row .info .des,.coop_sinpge .th .info .des{
font-size: 14px;
}
.cooperate{
margin-top: 10vw;
}
.cooperate ul li .name,.cooperate ul li:last-child .name{
margin-bottom: 5vw;
}
.coop_sinpge{
flex-wrap: wrap;
}
.coop_sinpge .thum{
width: 100%;
height: 15vh;
-webkit-transform: scaleY(1);
}
.coop_sinpge .th{
width: 100%;
padding: 20px;
}
.coop_row{
flex-wrap: wrap;
}
.coop_sinpge .th .info .title{
font-size: 4vw;
margin-bottom: 1vw;
}
.map{
display: none;
}
.contact_box {
width: 90%;
position: relative;
margin-left: 5%;
margin-top: 0vw;
margin-bottom: 0vw;
background: #fff;
padding: 20px;
box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.1);
border-radius: 5px;
}
.contact_box .name b{
font-size: 10vw;
}
.contact_box .list ul li .num{
font-size: 7vw;
width: 9vw;
}
.contact_box .list ul li .info{
width: calc(100% - 9vw);
}
.contact_box .list ul li{
margin-bottom: 3vw;
}
.contact_box .name{
margin-bottom: 5vw;
}
.partner{
padding: 5vw 0px;
}
.footer_top{
margin-bottom: 3vw;
}
.footers {
padding-top: 25px;
}
.banner-swiper video{
display: block;
width: 100%;
height: 100%;
position: absolute;
object-fit: cover;
}
.iconBox {
position: absolute;
display: block;
color: white;
top: 45%;
left: 50%;
cursor: pointer;
-webkit-transition: all .6s;
width: 60px;
height: 60px;
margin-left: -30px;
}
.iconBox img {
opacity: 1;
-webkit-transition: all .5s;
-webkit-animation: lineAnimate 10s linear infinite;
}
@-webkit-keyframes lineAnimate {
0% {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
@keyframes lineAnimate {
0% {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.iconBox::after{
position: absolute;
left: 50%;
top: 50%;
background: url(../images/play_icon.png) no-repeat;
background-size: auto 100%;
content: '';
width: 50px;
height: 50px;
margin-left: -25px;
margin-top: -25px;
}
.iconBox.active:after{
background-position: -50px 0px;
}
.iconBox.active{
opacity: .1;
}
.nav ul li:hover .firstLab a {
letter-spacing: 0px;
}
}